/* @import url(../reindeer/styles.css); */

@import "../reindeer/styles.css";

/*****************************************************************************/
/* Styling for the application.                                              */
/*****************************************************************************/

.v-app {
	background: white;
}

.v-horizontallayout-titlebar {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: thin solid gray;
    
    background: green;
    color: white;
}

.v-label-title {
    font-family: sans-serif;
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
}

.v-tree-node-caption-chaptertitle {
	font-weight: bold;
}

.viewlayout .v-verticallayout-spacing-on {
	padding-top: 10px;
}

.example-description {
	padding-top:    5px;
	padding-bottom: 5px;
	padding-left:   10px;
	padding-right:  20px;
	background: #e0e0e0;
}

.example-description h1 {
    font-size: 16pt;
    margin-top:    3px;
    margin-bottom: 5px;
}

.example-description p {
    margin-top:    3px;
    margin-bottom: 3px;
}

.verticalspacing10px .v-verticallayout-spacing-on {
    padding-top: 10px;
}

.sourcecontainer {
	margin-top: 50px;
	background: #d0d0d0;
}

.sourcecontainer .v-label-sourcecaption {
	font-weight: bold;
}

.sourcecontainer .v-label-sourcecode {
    background: white;
}

.sourcecontainer .v-horizontallayout-spacing-on {
	padding-left: 5px;
}

.sourcecontainer .v-horizontallayout-margin {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.v-form-bordered > fieldset {
	border: thin solid;
    padding: 5px;
}

.v-panel-caption-menupanel, .v-panel-caption-viewpanel {
       padding:    5px;
    background: black;
    color:      white;
}

.v-panel-content-menupanel > div {
       background: green /*#99e2f9 */;
       color:      white;
}

.v-panel-content-viewpanel > div {
    background: white;
    color:      black;
}


/*****************************************************************************/
/* SliderExample                                                             */
/*****************************************************************************/

/* BEGIN-EXAMPLE: component.slider */ 
.sliderexample .boxcontainer {
	background: blue;
}

.sliderexample .v-verticallayout-margin {
	padding: 2px;
}

.sliderexample .boxcontainer > div {
	background: white;
}

.sliderexample .sizeablebox {
	background: gray;
}
/* END-EXAMPLE: component.slider */ 

/*****************************************************************************/
/* LayoutExample (Cat Finder)                                                */
/*****************************************************************************/
/* BEGIN-EXAMPLE: layout.overview.catfinder */
/* For the title bar and black border around the view */
.v-verticallayout-catfinder {
    background: black;
}

/* Padding to create a border around the view */
.v-verticallayout-catfinder .v-verticallayout-margin {
    padding: 3px;
}

/* The main title */
.catfinder .v-label-title {
    font-size: 24pt;
    color: white;
    line-height:36pt;
    background: black;
}   

.catfinder .v-label-titlecomment {
    font-size: 12pt;
    color: white;
    line-height:36pt;
    background: black;
}   


/* The horizontal area */
.catfinder .v-horizontallayout .v-horizontallayout-spacing-on {
    background: gray;
    padding-left: 1px;
}

/* The menu tree panel */
.catfinder .v-panel-caption-menucontainer,
.catfinder .v-panel-caption-detailspanel {
    padding: 3px;
    color: white;
    background: gray;
    font-size: 12pt;
    line-height: 35pt;
    height: 44px;
}

/* The details caption. */
.catfinder .v-panel-caption-detailspanel {
	font-size: 18pt;
}

/* The details text. */
.catfinder .v-panel .v-label {
    font-size: 24pt;
    color: gray;
    line-height: 36pt;
    background: white;
}

.catfinder .treecontainer, .catfinder .v-panel, .catfinder .v-caption {
    background: white;
}

.catfinder .v-horizontallayout-spacing-on {
    padding-left: 4px;
}
/* END-EXAMPLE: layout.overview.catfinder */

/*****************************************************************************/
/* OrderedLayoutExample                                                      */
/*****************************************************************************/
/* BEGIN-EXAMPLE: layout.orderedlayout.sizing.sizing-undefined-defining */
/* Red border on left and right */
.v-verticallayout-bordered {
    border: medium solid red;
}
/* END-EXAMPLE: layout.orderedlayout.sizing.sizing-undefined-defining */

/*****************************************************************************/
/* ExpandRatioExample                                                        */
/*****************************************************************************/
.v-horizontallayout-redaroundyellow {
  border: 2px solid red;
  background: yellow;
}

.expandratioexample .v-button {
  height: 25px;
}

/* BEGIN-EXAMPLE: layout.formatting.alignment.maxwidth */
.maxwidthexample .expandingpanel {
	max-width: 570px; /* A bit less than the containing layout width */
}
/* END-EXAMPLE: layout.formatting.alignment.maxwidth */


/*****************************************************************************/
/* GridLayoutExample                                                         */
/*****************************************************************************/

/* BEGIN-EXAMPLE: layout.gridlayout.basic */
.v-gridlayout-basic-gridlayout .v-gridlayout-margin {
    background: blue;
    padding: 2px;
}

.v-gridlayout-basic-gridlayout > div > div > div {
    background: white;
    padding-top: 2px;
    padding-left: 2px;
}
/* END-EXAMPLE: layout.gridlayout.basic */

.v-gridlayout-blackborder .v-gridlayout-margin {
    background: black;
    padding: 1px;
}
.v-gridlayout-blackborder > div > div > div {
    background: white;
    padding-top: 1px;
    padding-left: 1px;
}


/****************/
/* Expand ratio */
/****************/

/* BEGIN-EXAMPLE: layout.gridlayout.expandratio */
.v-gridlayout-expandratio {
    background: blue;
}

.v-gridlayout-expandratio .v-gridlayout-margin {
    background: blue;
    padding: 2px;
}
.v-gridlayout-expandratio > div > div > div {
    background: white;
    padding-top: 2px;
    padding-left: 2px;
}

.v-gridlayout-expandratio > div > div > div > div {
    background: #ffffa0;
}
/* END-EXAMPLE: layout.gridlayout.expandratio */

/***********************/
/* MarginExample       */
/***********************/

/* BEGIN-EXAMPLE: layout.formatting.margin */
.v-verticallayout-marginexample {
	background: #c0c0c0;
}

.marginexample .v-verticallayout-margin {
    padding-left:   10px;
    padding-right:  20px;
    padding-top:    30px;
    padding-bottom: 40px;
}

.marginexample .v-label {
    background: white;
}
/* END-EXAMPLE: layout.formatting.margin */

/************************/
/* SpacingExample       */
/************************/
.spacingexample .v-verticallayout-spacing-on {
	padding-top: 50px;
}

.spacingexample .v-gridlayout-spacing-on {
	padding-left: 50px;
	padding-top:  100px;
}

/************************/
/* CaptionExample       */
/************************/
/* BEGIN-EXAMPLE: component.features.caption.styling */
/* Centering a caption */
.v-caption-in-middle .v-captiontext {
	float: none; /* Floating has to be disabled */
	text-align: center;
}

/* Right-aligning a caption */
.v-caption-on-right .v-captiontext {
	float: right;
}
/* END-EXAMPLE: component.features.caption.styling */

/************************/
/* EnabledExample       */
/************************/
/* BEGIN-EXAMPLE: component.features.enabled.styling */
.v-textfield.v-disabled {
	border: dotted;
}
/* END-EXAMPLE: component.features.enabled.styling */

/* BEGIN-EXAMPLE: component.features.readonly.styling */
.stylingexample .v-textfield.v-readonly {
	font-style: italic;
	border: thin solid gray;
}
/* END-EXAMPLE: component.features.readonly.styling */

/************************/
/* StyleNameExample     */
/************************/
/* BEGIN-EXAMPLE: component.features.stylename.add */
.mystyle {font-style: italic;}
/* END-EXAMPLE: component.features.stylename.add */

/* BEGIN-EXAMPLE: component.features.stylename.set */
.myonestyle {
	font-style: italic;
}
.myotherstyle {
    font-family: fantasy;
    font-size: 25px;
    font-weight: bolder;
    line-height: 30px;
}
/* END-EXAMPLE: component.features.stylename.set */

/************************/
/* TextFieldExample     */
/************************/

/* BEGIN-EXAMPLE: component.textfield.css */
/* BEGIN-EXAMPLE: component.passwordfield.css */
.v-textfield-dashing {
	border:     thin dashed;
	background: white; /* Has shading image by default */
}
/* END-EXAMPLE: component.textfield.css */
/* END-EXAMPLE: component.passwordfield.css */

/* BEGIN-EXAMPLE: component.textfield.widthfitting */
.textfieldexample .v-label-monospace,
.textfieldexample .v-textfield {
	font-family: monospace;
}
.textfieldexample .v-label-monospace {
	padding: 0px 5px;
	color: #a0a0a0;
}
/* END-EXAMPLE: component.textfield.widthfitting */

/************************/
/* TextAreaExample      */
/************************/

/*******************/
/* TreeExample     */
/*******************/
/* BEGIN-EXAMPLE: component.tree.disable */
.v-tree-node-caption-disabled {
	color: graytext;
	font-style: italic;
}
/* END-EXAMPLE: component.tree.disable */

/* BEGIN-EXAMPLE: component.tree.itemstylegenerator */
.v-tree-checkboxed .v-tree-node-caption-unchecked div span {
    background: url("img/checkbox-unchecked.png") no-repeat;
    padding-left: 24px;
}

.v-tree-checkboxed .v-tree-node-caption-checked div span {
    background: url("img/checkbox-checked.png") no-repeat;
    padding-left: 24px;
}
/* END-EXAMPLE: component.tree.itemstylegenerator */

/************************/
/* TreeTableExample     */
/************************/

/* BEGIN-EXAMPLE: component.treetable.itemstylegenerator */
.v-table-checkboxed .v-table-cell-content-unchecked div {
    background: url("img/checkbox-unchecked.png") no-repeat left;
    padding-left: 10px;
}

.v-table-checkboxed .v-table-cell-content-checked div {
    background: url("img/checkbox-checked.png") no-repeat left;
    padding-left: 10px;
}
/* END-EXAMPLE: component.treetable.itemstylegenerator */


/*******************/
/* I18NExample     */
/*******************/
/* BEGIN-EXAMPLE: advanced.i18n.rtl */
/* Captions */
.v-caption-right-to-left .v-captiontext {
	float: right;
}

/* TextField content */
.v-textfield-right-to-left {
	text-align: right;
}

/* This actually works for DateField */
.v-datefield-right-to-left {
	direction: rtl;
} 
/* END-EXAMPLE: advanced.i18n.rtl */

/*******************/
/* Drag & Drop     */
/*******************/
/* BEGIN-EXAMPLE: advanced.dragndrop.component.absolute */
/* Use the wrapper to draw a border around the layout. */
.componentdndexample .v-ddwrapper.layoutwrapper {
	background: blue;
}
.componentdndexample .v-ddwrapper.layoutwrapper .v-absolutelayout {
    background: white;
}

.componentdndexample .v-absolutelayout-wrapper,
.componentdndexample .overflowable {
    overflow: visible;
}
/* END-EXAMPLE: advanced.dragndrop.component.absolute */

.component-resize-example .draggable-resize-handle {
    background: url("img/resize-handle.png");
}

/*******************/
/* Label           */
/*******************/
/* BEGIN-EXAMPLE: component.label.spacing.non-breaking */
.withborders {
	background: blue;
}

.withborders .v-verticallayout-margin,
.withborders .v-horizontallayout-margin {
    padding: 2px;
}

.withborders .v-verticallayout-spacing-on {
	padding-top: 2px;
}

.withborders .v-horizontallayout-spacing-on {
    padding-left: 2px;
}

.v-horizontallayout-withborders > div > div > div,
.v-verticallayout-withborders > div > div > div {
    background: white;
}
/* END-EXAMPLE: component.label.spacing.non-breaking */

/* BEGIN-EXAMPLE: component.label.styling.css */
.fancylabel {
	margin: 5px;
	padding: 20px;
	background: yellow;
	color: blue;
	font-size: 30px;
	font-weight: bold;
}
/* END-EXAMPLE: component.label.styling.css */

/*******************/
/* DateField       */
/*******************/
/* BEGIN-EXAMPLE: component.datefield.popupdatefield.formatting */
.mydate.v-datefield-parseerror .v-textfield {
	background: pink;
}
/* END-EXAMPLE: component.datefield.popupdatefield.formatting */

/*******************/
/* CustomComponent */
/*******************/
/* BEGIN-EXAMPLE: component.customcomponent.joining */
.splitbutton .v-csslayout-container > div {
	display: inline-block;
    vertical-align: top;
}

.splitbutton .v-filterselect-input {
	display: none; /* Disable the text area of Select. */
}

.splitbutton .v-filterselect-button {
    border-left: thin solid gray; /* A separating line */
}

.splitbutton .v-button-wrap {
    margin-right: -6px; /* Crop the Button from right. */
}
/* END-EXAMPLE: component.customcomponent.joining */

/* BEGIN-EXAMPLE: component.customcomponent.customfield */
/* Hide the calendar header */
.v-datefield-no-year-or-month .v-datefield-calendarpanel-header {
	display: none;
}
/* END-EXAMPLE: component.customcomponent.customfield */

/*******************/
/* AbsoluteLayout  */
/*******************/
/* BEGIN-EXAMPLE: layout.absolutelayout.basic */
/* Use the wrapper to draw a border around the layout. */
.v-csslayout-borderframe {
	background: blue;
}

.v-csslayout-borderframe .v-csslayout-margin {
    margin: 2px;
    padding: 0px;
    background: white;
}
/* END-EXAMPLE: layout.absolutelayout.basic */

/* BEGIN-EXAMPLE: layout.absolutelayout.relative */
.abslayoutexample .v-panel,
.abslayoutexample .v-panel .v-verticallayout {
	background: #c0c0c0;
}

.abslayoutexample .v-label {
    background: #e0e0e0;
    text-align: center;
    vertical-align: middle;
}
/* END-EXAMPLE: layout.absolutelayout.relative */

/**************/
/* CssLayout  */
/**************/

/* BEGIN-EXAMPLE: layout.csslayout.basic */
/* BEGIN-EXAMPLE: layout.csslayout.styling */
/* Put the components in a single line */
.csslayoutexample .v-csslayout-container > div {
    display: inline-block;
    vertical-align: top;
}
/* END-EXAMPLE: layout.csslayout.basic */

/* Have the caption right of the text box, bottom-aligned */
.csslayoutexample .mylayout .v-csslayout-container {
    direction: rtl;
    line-height: 24px;
    vertical-align: bottom;
}

/* Have some space before and after the caption */
.csslayoutexample .mylayout .v-csslayout-container .v-caption {
    padding-left:  3px;
    padding-right: 10px;
}
/* END-EXAMPLE: layout.csslayout.styling */

/* BEGIN-EXAMPLE: layout.csslayout.flow */
/* Common styling for the boxes. */
.csslayoutexample .v-label-flowbox {
  border: thin black solid;
}
/* END-EXAMPLE: layout.csslayout.flow */

/*****************/
/* CustomLayout  */
/*****************/
/* BEGIN-EXAMPLE: layout.customlayout.styling */
/* Disable line wrap from between caption and input field */
.v-customlayout-customlayoutstyling  .v-caption {
	display: inline-block;
	width: 10em;
	padding-right: 3px;
}

/* Right-align (could also disable float and set alignment) */
.v-customlayout-customlayoutstyling .v-captiontext {
	float: right;
}
/* END-EXAMPLE: layout.customlayout.styling */

/*****************/
/* TableExample  */
/*****************/
.v-table-editableexample
/* BEGIN-EXAMPLE: component.table.editable.editableheights */
.v-table-cell-wrapper input.v-textfield {
	margin-bottom: 0px; /* Normally -2px in table */
    margin-top:    0px; /* Normally -2px in table */
    height: 19px;       /* Not auto */
}
/* END-EXAMPLE: component.table.editable.editableheights */

/* BEGIN-EXAMPLE: component.table.overview.layouts */
.squarebox {
	background: gray;
}
/* END-EXAMPLE: component.table.overview.layouts */

/* BEGIN-EXAMPLE: component.table.styling.cellstylegenerator */
/* Center the text in header. */
.checkerboard .v-table-header-cell {
    text-align: center;
}

/* Basic style for all cells. */
.checkerboard .v-table-cell-content {
    text-align: center;
    vertical-align: middle;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 20px;
    height: 28px;
}

.checkerboard .v-table-cell-content-white {
    background: white;
    color:      black;
}

.checkerboard .v-table-cell-content-black {
    background: black;
    color:      white;
}

.checkerboard .v-table-cell-content-rowheader {
    background: #d0d0d0;
}
/* END-EXAMPLE: component.table.styling.cellstylegenerator */

/* BEGIN-EXAMPLE: component.table.styling.rowstyle */
.v-table-row-emphasizedrow {
	background: yellow;
}
.v-table-row-grayedrow {
    color: grey;
}
/* END-EXAMPLE: component.table.styling.rowstyle */


/* BEGIN-EXAMPLE: component.table.styling.cssinjection */
/* Some CSS trickery is required to have the padding properly */

/* Disable vertical padding in the wrapper. */
.v-table-colorful .v-table-cell-wrapper {
    padding-top:    0px;
    padding-bottom: 0px;
}

/* Disable horizontal padding in the cell content */
.v-table-colorful .v-table-cell-content {
    padding-left:  0px;
    padding-right: 0px;
}

/* Padding must be removed also from the heading */
.v-table-colorful .v-table-caption-container {
    padding-left:  0px;
    padding-right: 0px;
}

/* This would cause trouble if padding is removed */
.v-table-colorful .v-table-resizer {
	display: none;
}

/* Put the padding here instead */
.v-table-colorful .v-label {
	padding: 3px;
}
/* END-EXAMPLE: component.table.styling.cssinjection */

/* BEGIN-EXAMPLE: component.table.columnformatting.columnformatting-extended */
.columnformatting .v-table-cell-content-right-aligned {
	text-align: right;
}
/* END-EXAMPLE: component.table.columnformatting.columnformatting-extended */

/* BEGIN-EXAMPLE: component.table.headersfooters.fakeheaders */
.v-gridlayout-fakeheader {
	background: #e0e0e0;
    border-color: #C2C3C4;
    border-style: solid;
    border-width: 1px;
}

.v-gridlayout-fakeheader .v-label {
    padding-left:  6px;
    padding-right: 6px;
}

.v-gridlayout-fakeheader > div > div > div {
    border-color: #C2C3C4;
    border-width: 1px;
    border-style: none solid none none;
    border-collapse: separate;
    border-spacing: 0;
    text-shadow: 0 1px 0 #F3F5F8;
}
/* END-EXAMPLE: component.table.headersfooters.fakeheaders */

/* BEGIN-EXAMPLE: component.table.headersfooters.htmlheaders */
.v-table-multirowheaders .v-table-header-wrap {
    height:     40px;
    background: #e0e0e0;
    text-transform: none;
}

.v-table-multirowheaders .v-table-header {
    display: table-cell;
}
/* END-EXAMPLE: component.table.headersfooters.htmlheaders */

/* BEGIN-EXAMPLE: component.table.components.varyingheightlabels */
.v-table-multirowlabels .v-table-cell-wrapper {
  white-space: normal;
}
/* END-EXAMPLE: component.table.components.varyingheightlabels */

/***********************/
/* ThemeTricksExample  */
/***********************/
/* BEGIN-EXAMPLE: themes.misc.pointertypes */
.select-pointer   {cursor: auto;}
.select-crosshair {cursor: crosshair;}
.select-default   {cursor: default;}
.select-help      {cursor: help;}
.select-move      {cursor: move;}
.select-pointer   {cursor: pointer;}
.select-progress  {cursor: progress;}
.select-text      {cursor: text;}
.select-wait      {cursor: wait;}
.select-inherit   {cursor: inherit;}
/* END-EXAMPLE: themes.misc.pointertypes */

/*************************/
/* TwinColSelectExample  */
/*************************/

/* BEGIN-EXAMPLE: component.select.twincolselect.css */
.twincolselectexample .v-select-twincol-options,
.twincolselectexample .v-select-twincol-selections {
	overflow: hidden;
	font-style: italic;
}
/* END-EXAMPLE: component.select.twincolselect.css */

/***********************/
/* OptionGroupExample  */
/***********************/
/* BEGIN-EXAMPLE: component.select.optiongroup.styling */
/* Lay the options horizontally */
.v-select-optiongroup-horizontal .v-select-option {
	display: inline-block;
}

/* Avoid wrapping if the layout is too tight */
.v-select-optiongroup-horizontal {
    white-space: nowrap;
}

/* Some extra spacing is needed */
.v-select-optiongroup-horizontal
  .v-select-option.v-radiobutton {
	padding-right: 10px;
}
/* END-EXAMPLE: component.select.optiongroup.styling */

/**********************/
/* SplitPanelExample  */
/**********************/
/* BEGIN-EXAMPLE: layout.splitpanel.basic */
.splitpanelexample .v-panel-content {
    border: 1px solid black;
}
/* END-EXAMPLE: layout.splitpanel.basic */
/* BEGIN-EXAMPLE: layout.splitpanel.styling */
/* Disable both divider and drag handle */
.v-splitpanel-hsplitter-invisiblesplitter,
.v-splitpanel-hsplitter-invisiblesplitter div  {
    width: 0px;
} 

/* Style the right container */
.invisiblesplitter .v-splitpanel-second-container {
    background: yellow;
}
/* END-EXAMPLE: layout.splitpanel.styling */

/***********************/
/* ExpandRatioExample  */
/***********************/
.expandratioexample 
/* BEGIN-EXAMPLE: layout.formatting.expandratio.basic */
/* Spacing between the components in the VerticalLayout */
.v-panel .v-verticallayout-spacing-on {
    padding-top: 10px;
}

/* Smaller than the default margin. */
.expandratioexample
.v-panel .v-verticallayout-margin {
    padding: 5px;
}

/* More visible border to show the panel better. */
.expandratioexample
.v-panel .v-panel-content {
    border: 1px solid gray;
}
/* END-EXAMPLE: layout.formatting.expandratio.basic */

/*********************/
/* SubWindowExample  */
/*********************/
/* BEGIN-EXAMPLE: application.child-windows.styling */
/* Yellow window header */
.v-window-yellowsub .v-window-outerheader {
  background: yellow;
}

/* Blue window caption text */
.v-window-yellowsub .v-window-header {
  color: blue;
}

/* Pale yellow window contents */
.v-window-yellowsub .v-window-contents {
  background: #ffffc0; /* Pale yellow */
}

/* Close button */
.v-window-yellowsub .v-window-closebox {
  background: url('img/checkbox-checked.png');
}
/* END-EXAMPLE: application.child-windows.styling */

/********************/
/* ComboBoxExample  */
/********************/
/* BEGIN-EXAMPLE: component.select.combobox.styling */
.v-filterselect-mycombo {
}

/* Style the text box */
.v-filterselect-mycombo .v-filterselect-input {
  border: none;
  background: yellow;
}
/* END-EXAMPLE: component.select.combobox.styling */

/****************/
/* FormExample  */
/****************/
/* BEGIN-EXAMPLE: component.form.styling.wrapcaptions */
.v-form-wrapcaption .v-caption {
  width: 100px;
  white-space: normal;
  text-align: left;
}
/* END-EXAMPLE: component.form.styling.wrapcaptions */

/* BEGIN-EXAMPLE: component.form.nested */
.v-form-innertable .v-formlayout-captioncell {
	vertical-align: top; 
}
/* END-EXAMPLE: component.form.nested */

/* BEGIN-EXAMPLE: component.form.layout.customlayout */
.v-form-inlinefields .v-customlayout > div {
	display: inline-block;
}
/* END-EXAMPLE: component.form.layout.customlayout */

/********************/
/* EmbeddedExample  */
/********************/
/* BEGIN-EXAMPLE: component.embedded.scrolling-css */
.v-embedded-scrollable {
  overflow: auto;
}
.v-embedded-scrollable img {
  height: auto !important; /* Override element style */
  width:  auto !important; /* Override element style */
}
/* END-EXAMPLE: component.embedded.scrolling-css */

/****************/
/* LinkExample  */
/****************/
/* BEGIN-EXAMPLE: component.link.target */
/* Position icon right of the link text. */
.icon-after-caption {
	direction: rtl;
}
/* Add some padding around the icon. */
.icon-after-caption .v-icon {
    padding: 0 3px;
}
/* END-EXAMPLE: component.link.target */

